<template>
	<view class="box">
		<view class="main" v-for="item in codelist" :key="item.id"   >
			<view class="tit">
				商家扫码劵码即可消费
			</view>
			<image :src="item.code_image" mode="aspectFill"></image>
			<view class="line">
				
			</view>
			<view class="name">
				核销码
			</view>
			<view class="num">
				{{item.code}}
			</view>
			<image  class="tag"  v-if="item.status==2" :src="baseUrl + '/static/commonimg/ytk.png'" mode="aspectFill"></image>
			<image  class="tag"  v-if="item.status==1" :src="baseUrl +'/static/commonimg/ysy.png'" mode="aspectFill"></image>
		</view>
		<view class="empty2">
			
		</view>
	</view>
</template>

<script>
import {codelist}from "../../api/local.js"
export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				id:"",
				codelist:[],
				            timer: null

			}
		},
		onLoad(e) {
			this.id=e.id
			this.getlist()
			   this.timer = setInterval(()=>{
				  this.getlist()
			  }, 2000);
		},
		 onUnload() {
		        // 在页面销毁时清除定时器
		        if (this.timer) {
		            clearInterval(this.timer);
		            this.timer = null;
		        }
		    },
		methods: {
			getlist(){
				codelist({
					order_id:this.id
				}).then(res=>{
					this.codelist=res.data
				})
			}
		},	
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
				that.getlist()
			
		},
	}
</script>

<style scoped lang="scss">
	.box{
		width: 750rpx;
	}
	
	.main{
		width: 690rpx;
		height: 740rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin:  0 auto;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		.tag{
			width: 230rpx;
			height: 248rpx;
			position: absolute;
			right: 16rpx;
			bottom: 16rpx;
			z-index: 99;
		}
		.tit{
			font-weight: 500;
			font-size: 30rpx;
			color: #3D3D3D;
			margin: 0 auto;
			padding-top: 58rpx;
		}
		>image{
			width: 426rpx;
			height: 426rpx;
			margin: 0 auto;
			margin-top: 34rpx;
			
		}
		.line{
			width: 644rpx;
			height: 0rpx;
			margin: 0 auto;
			margin-top: 38rpx;
			// border: 4rpx solid #E6E6E6;
			border: 4rpx dashed #E6E6E6;
		}
		.name{
			margin: 0 auto;
			margin-top: 28rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #3D3D3D;
		}
		.num{
			margin: 0 auto;
			margin-top: 16rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #3D3D3D;
		}
	}
</style>